<!doctype html>
<!--选择兑换方案页面-->
<html>

<head>
  <meta charset="UTF-8">
  <title>礼品换积分</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <!--<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>-->
  <style>
    html {
      font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      height: 100%;

    }

    body {
      overflow-x: hidden;
      background-color: #F4F4F4; !important;
      padding-bottom: 1.5rem;
    }
    p{
      margin: 0;
      color:black;
    }

    .title{
      width: 100%;
      overflow: hidden;
      padding: 0.4rem 0 ;
      border-bottom: 1px solid #CACACA;
    }

    .title div{
      float: left;
    }
    .title div:first-child{
      margin-right: 0.3rem;
      margin-left: 0.3rem;
    }

    .title img{
      width: 1.6rem;
      height:1.6rem;
    }
    .headerName{
      width: 100%;
      text-align: center;
      padding: 0.2rem 0 ;
    }
    .programmeList{
      width: 100%;
    }
    .programme{
      margin-bottom: 0.2rem;
      background-color: white;
    }
    .programmeTitle{
      width: 100%;
      border-bottom: 1px solid #CACACA;
      font-size: 0.24rem;
      overflow: hidden;
      height: 0.4rem;
    }
    .programmeTitle .programmeTitleLeft{
      width: 60%;
      float: left;
      height: 99%;
    }
    .programmeTitleLeft label{
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      padding-left: 0.4rem;
    }
    .programmes{
      display: none;
    }
    .programmes[type="checkbox"]+span {
      display: inline-block;
      border-radius: 0.05rem;
      width: 0.3rem;
      height: 0.3rem;
      border: 1px solid black;
      background: white;
      position: absolute;
      top: 0.05rem;
      left: 0.05rem;
    }
    .programmes[type="checkbox"]:checked+span:after{
      content: '\2714';
      width: 0.28rem;
      height: 0.28rem;
      color: white;
      background: black;
      border-radius: 0.05rem;
      text-align: center;
      position: absolute;
      font-size: 0.2rem;
      line-height: 0.28rem;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .programmeTitle .programmeTitleright{
      float: right;
      width: 30%;
      height: 99%;
      /*background: orange;*/
      overflow: hidden;
      padding-top:0.045rem;
    }
    .programmeTitleright .countBtn{
      padding: 0;
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      border: 1px solid rgb(217,217,217);
      color:rgb(217,217,217) ;
      font-size: 0.28rem;
      text-align: center;
      float: left;
      line-height: 0.3rem;
    }
    .programmeTitleright .showProCount{
      padding: 0;
      display: inline-block;
      width: 1rem;
      height: 0.3rem;
      line-height: 0.3rem;
      border: none;
      font-size: 0.2rem;
      border: 1px solid rgb(187,187,187);
      margin: 0 0.1rem;
      text-align: center;
      float: left;
    }
    /*.programme>p:first-child{*/
      /*width: 100%;*/
      /*padding: 0.05rem;*/
      /*border-bottom: 1px solid #CACACA;*/
      /*font-size: 0.24rem;*/
    /*}*/
    .giftList{
      overflow: hidden;

    }
    .giftList>div{
      padding: 0.1rem 0 0;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }
    .giftImg{
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 0.3rem;
      overflow: hidden;
      margin-left: 0.3rem;
      float: left;
    }
    .giftImg img{
      width: 0.6rem;
    }
    .giftName{
      width: 5.2rem;
      float: left;
      height: 0.6rem;
      line-height: 0.6rem;
      margin-left: 0.3rem;
      border-bottom: 1px solid #CACACA;
    }
    .showIntegral{
      width: 100%;
      padding:0.1rem  0.2rem ;
      overflow: hidden;
    }
    .showIntegral .singleIntegral{
      float: left;
      color: #adadad;
    }
    .showIntegral .totalIntegral{
      float: right;
    }
    .nextStep{
      position: fixed;
      bottom: 0.3rem;
      z-index: 999;
      width: 100%;
      height: 1rem;
    }
    .nextStep>button{
      display: block;
      width: 80%;
      height: 1rem;
      color: white;
      background: rgb(255,152,0);
      text-align: center;
      line-height: 0.8rem;
      margin: 0 auto;
      border-radius: 0.2rem;
    }






  </style>
</head>

<body>
<div class="mui-content" id="app">
  <div class="title" @click="showImg">
    <div>
      <img :src="config.imgPath + classInfo.icon" alt="">
    </div>
    <div>
      <p> <strong>{{classInfo.name}}</strong> </p>
      <p>{{new Date(classInfo.startTime).format('yyyy.MM.dd')}} - {{new Date(classInfo.endTime).format('yyyy.MM.dd')}} </p>
    </div>
  </div>
  <p class="headerName">第二步：选择兑换方案</p>

  <!--方案list-->
  <div class="programmeList">
    <div v-for="(item,index) in originalData" class="programme"  >
    <!--<div v-for="(item,index) in originalData" class="programme"  @click="toChooseProgramme(item)">-->
      <div class="programmeTitle">
        <div class="programmeTitleLeft">
          <label @click="checkedProgramme(index)">
            <input type="checkbox" class="programmes" name="programmes" :value="index" />
            <span class="option"></span>
            {{item.name}}
          </label>
        </div>
        <div class="programmeTitleright" style="display: none">
          <button class="countBtn" @click="delCount(index)">-</button>
          <input type="number" class="showProCount" @blur="inputBlur(index)"/>
          <button class="countBtn" @click="addCount(index)">+</button>
        </div>
      </div>

      <div class="giftList" v-for="(item1,index1) in item.groupProp">
        <div>
          <div class="giftImg">
            <img :src="config.imgPath + item1.icon" alt="">
          </div>
          <p class="giftName">{{item1.name}}x{{item1.propQuantity}}</p>
        </div>
      </div>
      <!--<p class="totalIntegral">兑换：{{item.ticket}}积分</p>-->
      <p class="showIntegral">
        <span class="singleIntegral">价值：{{item.ticket}}积分</span>
        <span class="totalIntegral" style="display: none"></span>
      </p>
    </div>

  </div>
  <div class="nextStep">
    <button type="button" class="mui-btn nextBtn" @click="toChooseProgramme">下一步</button>
  </div>


</div>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var vm = new Vue({
    el: '#app',
    data: {
      ifShow: true,
      currentShopObj: {},
      classInfo:'',  //活动类  信息
      originalData:'',
      proCount:[],
      checkedProData:[],
    },
    created: function() {
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()
      })
    },

    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        this.classInfo=self.classInfo;
        this.localData();
      },
      showImg: function() {
        var imgs=document.getElementsByTagName('img');
        for(var i=0;i<imgs.length;i++){
          console.log(imgs[i].src);
        }
      },
      localData:function(){
        var  vm=this;
        var  data={
          "tId":vm.classInfo.id,
          "page":1,
          "pageSize":1000
        };
        console.log(JSON.stringify(data))
        config.ajax({
          url: '/mcard/group/getPropList',
          data: {
            "tId":vm.classInfo.id,
            "page":1,
            "pageSize":1000
          },
          success: function(res) {
            // console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.originalData=res.data.data
              console.log('originalData:'+JSON.stringify(vm.originalData));
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function (res) {
            mui.toast(res.errormsg)
          }
        })
      },
      checkedProgramme:function(index){
        var vm=this;
        var count=document.getElementsByClassName('programmeTitleright')[index];
        var box=document.getElementsByClassName('programmes')[index];
        var showProcount=document.getElementsByClassName('showProCount')[index];
        var totalIntegral=document.getElementsByClassName('totalIntegral')[index];
        showProcount.value=1;
        vm.proCount[index]=showProcount.value;
        console.log(vm.proCount[index]);
        // console.log(box.checked);
        if(box.checked){
          count.style.display='block';
          totalIntegral.style.display='block';
          totalIntegral.innerHTML='共获得：'+vm.originalData[index].ticket*vm.proCount[index]+'积分';
        }else{
          count.style.display='none';
          totalIntegral.style.display='none';
        }
      },
      inputBlur:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        var totalIntegral=document.getElementsByClassName('totalIntegral')[index];
        var vm=this;
        if(!showProcount.value){
          showProcount.value=1;

        }
        vm.proCount[index]=showProcount.value;
        totalIntegral.innerHTML='共获得：'+vm.originalData[index].ticket*vm.proCount[index]+'积分';
      },
      delCount:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        var totalIntegral=document.getElementsByClassName('totalIntegral')[index];
        if(showProcount.value>1){
          showProcount.value--;
        }
        vm.proCount[index]=showProcount.value;
        totalIntegral.innerHTML='共获得：'+vm.originalData[index].ticket*vm.proCount[index]+'积分';
      },
      addCount:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        var totalIntegral=document.getElementsByClassName('totalIntegral')[index];
        showProcount.value++;
        vm.proCount[index]=showProcount.value;
        totalIntegral.innerHTML='共获得：'+vm.originalData[index].ticket*vm.proCount[index]+'积分';
      },
      toChooseProgramme:function(){
        var vm=this;
      vm.checkedProData=[];
        var checkboxes=document.getElementsByClassName('programmes');
        var item={};
        for(var i=0;i<checkboxes.length;i++){
          if(checkboxes[i].checked){
            item={
              proData:vm.originalData[i],
              count:vm.proCount[i],
            };
            vm.checkedProData.push(item);
          }else{
            item={};
          }
        }
        console.log(JSON.stringify( vm.checkedProData));

        if(vm.checkedProData.length==0){
          mui.toast("请选择兑换方案");
          return;
        }
        mui.openWindow({
          url: './chooseProgramme.html',
          id: 'chooseProgramme',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '卡片存积分',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          createNew:true,  //再次进入页面重新创建  解决mui.plusReady 2次进入 不执行问题
          extras: {
            currentShopObj: vm.currentShopObj,
            programmeInfo:vm.originalData,
            checkedProData:vm.checkedProData,
            classInfo:vm.classInfo

          }
        })
      },
    }
  })

</script>
</body>

</html>